<template>
  <div class="member-info">
    <div class="general border-bottom" @click="handleShowButtons">
      <div class="wrapper">
        <div class="top">
          <div class="member-account">
            <span>{{item.accountName}}</span>
            <span class="info" v-show='item.totalMembers !== 0'>
              {{item.role == '0' ? '队长' : item.totalMembers}}<span v-show="item.role != '0'">人</span>
            </span>
          </div>
          <div class="member-state">
            <span class="online" v-show="item.isLogin">
              在线
            </span>
            <span class="last-login" v-show="!item.isLogin">
              {{item.lastLogin | formater}}
            </span>
          </div>
        </div>
        <div class="bottom">
          <span class="balance">
            个人余额：<span :class="item.personalBalance > 0 ? 'red' : ''" class="balance-no">{{item.personalBalance}}</span>
          </span>
          <span class="balance">
            团队余额：<span :class="item.groupBalance > 0 ? 'red' : ''" class="balance-no">{{item.groupBalance}}</span>
          </span>
        </div>
      </div>
    </div>
    <div class="detail border-bottom" v-show="showUser == item.userid">
    <!-- <div class="detail border-bottom" v-show="showButtons"> -->
      <div class="btn button-selected">
        团队详情
      </div>
      <div class="btn button-selected" @click="checkMemberDetail(item.userid)">
        队长详情
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: function() {
        return {
          accountName: 'qwer123',
          role: '0',
          totalMembers: 890,
          personalBalance: 7878,
          teamBalance: 787878,
          isLogin: true,
          lastLogin: new Date().getTime() - 3600 * 1000
        }
      }
    },
    showUser: ''
  },
  data() {
    return {
      // showButtons: false
    }
  },
  methods: {
    handleShowButtons() {
      // this.showButtons = !this.showButtons
      this.$emit("showChild",this.item.userid)
    },
    checkMemberDetail(id) {
      this.$emit('click', id)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .member-info 
    box-sizing border-box 
    .general 
      width 100%
      height 62px 
      display flex 
      align-items center 
      box-sizing border-box 
      padding 0 10px
      background $color-text-button
      .wrapper 
        width 100%
        .top 
          display flex 
          align-items center
          margin-bottom 10px 
          .member-account 
            flex 1
            .info 
              display inline-block
              border 1px solid $color-theme-red 
              border-radius 3px 
              line-height 16px
              box-sizing border-box 
              padding 0 5px 
              text-align center 
              color $color-theme-red
              font-size 13px
              background-color rgba($color-theme-red, 0.102)
          .member-state 
            .last-login 
              color $color-sub-grey
        .bottom 
        display flex
        .balance  
          margin-right 10px
          .red
            color $color-theme-red 
    .detail 
      display flex 
      height 48px 
      align-items center 
      justify-content center
      background $input-background-color
      box-shadow  0px -1px 2px $color-sub-grey
      .btn 
        height 30px 
        line-height 30px
        width 86px 
        font-size 15px 
        text-align center
        margin-right 20px 
</style>
